<template>
	<view class="decision-content">
		<view class="select-title">
			<listSelect
				style="width: 185rpx"
				v-model="form.evType"
				@confirm="search"
				:list="evList"
				class="top1-item"
			></listSelect>
			<view class="line"></view>
			<listSelect
				style="width: 185rpx"
				v-model="form.level"
				@confirm="search"
				:list="levelList"
				class="top1-item"
			></listSelect>
			<view class="line"></view>
			<listSelect
				style="width: 185rpx"
				v-model="form.statusType"
				@confirm="search"
				:list="statusList"
				class="top1-item"
			></listSelect>
			<view class="line"></view>

			<view class="flex-vc" @click="showTimeEv">
				<text class="nop">{{ form.time }}</text>
				<u-icon class="ml20" color="#607589" name="arrow-down-fill" size="20"></u-icon>
			</view>

			<!-- <view class="search-btn flex-cc" @click="initPage()">查询</view> -->
		</view>

		<view class="report-msg"
			>{{ form.time | dateStr('YYYY年MM月') }}， 您上传的{{ labelTpye(form.evType) }}、{{
				labelLevel(form.level)
			}}的事件报告有{{ dataList.length }}条。
		</view>

		<view class="report-sv">
			<u-collapse ref="collapse" class="item-box-list" v-if="dataList.length > 0">
				<!-- -->

				<u-collapse-item v-for="(item, index) in dataList" :key="item.id" @change="(e) => fnColChange(e, item, index)">
					<template slot="title-all">
						<view
							class="col-box"
							:style="{
								background: item.status == 2 ? '#edf5ff' : '#F5F5F5'
							}"
						>
							<view class="item-box">
								<!-- <u-icon size="30" name="bookmark-fill" :color="item.status == 2 ? '#41A4FF' : '#FF6969'"></u-icon> -->
								<i class="iconfont icon-a-wenben12" :style="{ color: item.status == 2 ? '#41A4FF' : '#FF6969' }"></i>
								<text class="ml10" style="color: #70757a">{{ item.evLocation }}</text>
								<!-- <text class="ml10" style="color: #0085ff">{{ item.evTime }}</text> -->
							</view>

							<view class="flex-vc">
								<view class="success-btn mr20 nop" v-show="item.status == 2">已解决</view>
								<view class="danger-btn mr20 nop" v-show="item.status == 1">未解决</view>
								<u-icon v-show="colShowList.includes(index)" name="arrow-up-fill" size="20" color="#607589"></u-icon>
								<u-icon v-show="!colShowList.includes(index)" name="arrow-down-fill" size="20" color="#607589"></u-icon>
							</view>
						</view>
					</template>
					<view
						class="body-cont"
						:style="{
							background: item.status == 2 ? '#edf5ff' : '#F5F5F5'
						}"
					>
						<view class="cont-sin">
							<view class="cont-sin-title">事件类型</view>
							<view class="cont-sin-view">{{ item.evType }}</view>
						</view>
						<view class="cont-sin">
							<view class="cont-sin-title">严重程度</view>
							<view class="cont-sin-view">{{ labelLevel(item.evLevel) }}</view>
						</view>
						<view class="cont-sin">
							<view class="cont-sin-title">事件描述</view>
							<view class="cont-sin-view">{{ item.evDescribe }}</view>
						</view>
						<view class="cont-sin">
							<view class="cont-sin-title">事件时间</view>
							<view class="cont-sin-view">{{ item.evTime }}</view>
						</view>
						<view class="cont-sin">
							<view class="cont-sin-title">事件地点</view>
							<view class="cont-sin-view">{{ item.evLocation }}</view>
						</view>
						<view class="cont-sin">
							<view class="cont-sin-title">附件</view>
							<view class="cont-sin-view">
								<fileShow :files="item.fileUrls"></fileShow>
							</view>
						</view>
						<view class="cont-sin borUp flexD-vc pt10">
							<view class="cont-sin-title">处置过程</view>
							<view class="cont-sin-view">
								<view v-for="elSin in item.urgentEventLogs" :key="elSin.id" class="mt5 bot-bot">
									<text
										class="fs24"
										:style="{ color: elSin.statusName == '确认' ? '#0085FF' : '#52AF9F', width: '120rpx' }"
									>
										<text class="mr3">✳</text>
										{{ elSin.statusName }}
									</text>

									<view>
										<text class="ml10">{{ elSin.updateUserName }}</text>
										<text class="ml10">{{ elSin.userPhone }}</text>
										<text class="ml10">{{ elSin.updateTime | dateStr('YYYY-MM-DD HH:mm') }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="info-deal">
							<view class="danger-btn" @click="okDel(item)" v-if="item.status == 1 && item.urgentEventLogs.length == 0">
								删除
							</view>
							<view class="info-btn ml10" @click="deal(item)" v-if="item.status == 1"> 解决 </view>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
			<u-empty text="暂无数据" mode="list" v-else></u-empty>
		</view>

		<u-picker
			mode="time"
			:default-time="form.time"
			v-model="timeShow"
			:params="timeParams"
			@confirm="confirmTime"
		></u-picker>

		<u-modal
			v-model="show"
			content="确认解决此事件？"
			show-cancel-button
			@confirm="confirm"
			@cancel="show = false"
		></u-modal>
	</view>
</template>
<script>
	import listSelect from '@/components/common/select/listSelect.vue'
	import sjsbApi from '@/api/yjzh/sjsb.js'
	import moment from 'moment'
	import eventTool from '@/utils/event'
	import { debounce } from '@/utils/util'
	export default {
		name: '',
		components: { listSelect, fileShow: () => import('./cpn/fileShow.vue') },
		data() {
			return {
				form: {
					evType: 'all',
					time: moment().format('YYYY-MM'), // '2023-05',
					statusType: 0
				},
				evList: [{ label: '所有事件', value: 'all' }],
				statusList: [
					{ label: '所有状态', value: 'all' },
					{ label: '未解决', value: 1 },
					{ label: '已解决', value: 2 }
				],
				levelList: [{ label: '所有等级', value: 'all' }],
				timeShow: false,
				timeParams: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},

				dataList: [],
				colShowList: [],

				show: false
			}
		},
		computed: {},

		async mounted() {
			this.search()
			const res = await eventTool.getTypeJson()
			this.evList.push(...res.evTypeList)
			this.levelList.push(...res.evLevelList)
		},

		methods: {
			async initPage() {
				const userInfo = uni.getStorageSync('userInfo')
				const resp = await sjsbApi.myEventResultList({
					userId: userInfo.user_id,
					date: moment(this.form.time).format('YYYY-MM-DD HH:mm:ss'), // this.form.time,
					status: this.form.statusType != 'all' ? this.form.statusType : undefined,
					evTypeCode: this.form.evType != 'all' ? this.form.evType : undefined,
					evLevel: this.form.level != 'all' ? this.form.level : undefined
				})
				if (resp.code == 200) {
					this.dataList = resp.data
					let noDealNum = this.dataList.filter((el) => {
						return el.status == 1
					})
					this.$emit('getNum', noDealNum.length)
				}
			},
			showTimeEv() {
				this.timeShow = true
			},
			confirmTime(value) {
				this.form.time = `${value.year}-${value.month}`
				this.search()
			},
			search: debounce(function (params) {
				this.$nextTick(() => {
					this.initPage()
				})
			}, 200),
			labelLevel(value) {
				let item = this.levelList.find((el) => el.value == value)
				return item ? item.label : ''
			},
			labelTpye(value) {
				let item = this.evList.find((el) => el.value == value)
				return item ? item.label : ''
			},
			async fnColChange(e, val, idx) {
				this.colShowList = []
				if (!e.show) {
					return
				}
				this.colShowList.push(idx)
			},

			deal(item) {
				this.show = true
				this.preItem = item
				console.info(`item:`, item)
			},
			async confirm() {
				const resp = await sjsbApi.updateStatus({
					urgentEventId: this.preItem.id,
					userId: this.UserInfoData.id,
					userName: this.UserInfoData.nickName,
					areaName: this.UserInfoData.deptName,
					userPhone: this.UserInfoData.phone
				})
				if (resp.code == 200) {
					uni.showToast({
						icon: 'info',
						title: '操作成功'
					})
					this.initPage()
				} else {
					uni.showToast({
						icon: 'error',
						title: '操作失败'
					})
				}
			},
			okDel(item) {
				uni.showModal({
					title: '提示',
					content: '确定删除次事件？',
					showCancel: true,
					success: async ({ confirm, cancel }) => {
						if (confirm) {
							const resp = await sjsbApi.deleteRe({ urgentEventId: item.id })
							if (resp.code == 200) {
								uni.showToast({
									icon: 'info',
									title: '操作成功'
								})
								this.initPage()
							} else {
								uni.showToast({
									icon: 'error',
									title: '操作失败'
								})
							}
						}
						console.info(`confirm, cancel :`, confirm, cancel)
					}
				})
			}
		},
		filters: {}
	}
</script>
<style lang="less" scoped>
	.decision-content {
		width: 100%;
		height: 100%;
		padding: 24rpx;
		overflow: auto;
		.select-title {
			width: 100%;
			height: 60rpx;
			background: #e4f2ff;
			border-radius: 4rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10rpx;
			.line {
				height: 35rpx;
				width: 5rpx;
				color: #607589;
				background: #607589;
				border-radius: 10rpx;
				margin: 0 15rpx;
				opacity: 0.25;
			}
			.search-btn {
				width: 123rpx;
				height: 50rpx;
				background: #41a4ff;
				border-radius: 4rpx;
				color: #fff;
				letter-spacing: 10rpx;
			}
			/deep/.areaSelect-box {
				justify-content: center;
			}
		}
		.report-msg {
			margin: 10rpx 0;
			font-weight: 500;
			font-size: 24rpx;
			display: flex;
			text-align: left;
			color: #70757a;
		}
		.report-sv {
			width: 100%;
			height: calc(100% - 200rpx);
			font-size: 26rpx;
			overflow: auto;
			/deep/.u-collapse-head {
				padding: 0rpx 0;
			}
			.u-collapse-item {
				margin: 10rpx 0;
			}
			.col-box {
				background: #edf5ff;
				font-size: 26rpx;
				width: 100%;
				padding-right: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 80rpx;
				padding: 0 10rpx;
				// border-bottom: 1rpx solid rgba(0, 0, 0, 0.071);
			}
			.success-btn {
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 7rpx 15rpx;
				background: #cdf0ea;
				border: 1rpx solid #52af9f;
				border-radius: 4rpx;
				color: #52af9f;
			}
			.danger-btn {
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 7rpx 15rpx;
				background: #ffe6e6;
				border: 1rpx solid #ff0000;
				border-radius: 4rpx;
				color: #ff4747;
			}

			.info-btn {
				width: 100rpx;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 7rpx 15rpx;
				background: #52af9f;
				border: 1rpx solid #52af9f;
				border-radius: 4rpx;
				color: #fff;
			}

			.info-deal {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				border-top: 2rpx solid rgba(96, 117, 137, 0.121);
				padding: 10rpx 0;
			}

			.body-cont {
				width: 100%;
				font-size: 26rpx;
				border-top: 2rpx solid rgba(96, 117, 137, 0.121);
				border-bottom: 2rpx solid rgba(96, 117, 137, 0.12);
				padding: 0 20rpx;
				.cont-sin {
					width: 100%;
					display: flex;
					margin: 10rpx 0;
					.cont-sin-title {
						width: 120rpx;
						text-align: right;
						font-size: 26rpx;
					}
					.cont-sin-view {
						margin-left: 25rpx;
						font-size: 26rpx;
						flex: 1;
						color: #000;
						.bot-bot {
							margin: 5rpx 0;
							// border-bottom: 1rpx solid rgba(102, 102, 102, 0.13);
							padding-bottom: 2rpx;
							padding-right: 10rpx;
							// margin-left: -25rpx;
						}
					}
				}
			}
		}
	}
</style>
